<template>
	<view class="page flex flex-col">
		<navbar :leftText="'帮助说明'" :backStatus="true"></navbar>
		<view class="w690  flex-1">
			<view class="flex-center">
				<view style="width:100%;">
					<up-tabs :list="list1" @click="selectHelp" lineWidth="80" lineColor="#38FDFF" :activeStyle="{
					    color: '#38FDFF',
					    fontWeight: 'bold'
					}" :inactiveStyle="{
					    color: '#FFFFFF ',
					    transform: 'scale(1)'
					}" itemStyle="padding-left: 20px; padding-right: 20px; height: 50px;"></up-tabs>
					<view class="classify"></view>
				</view>
			</view>
			<!-- 帮助说明列表 -->
			<view v-if="helpMingList.length>0" class="text-white text-26">
				<view class="helpItem flex-between" @click="selectItem" v-for="(item,index) in helpMingList">
					<view class="overflow-text helpTitle">{{item.title}}</view>
					<up-icon name="arrow-right" color="#fff" size="14"></up-icon>
				</view>
			</view>

			<view v-else class="flex-column-center" style="height:80%;">
				<up-empty mode="car" icon="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif" text="暂无数据">
				</up-empty>
			</view>





		</view>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	// let imageUrl = ref("");
	// onMounted(() => {
	// 	// 全局变量引入
	// 	const globalData = inject('globalData');
	// 	imageUrl.value = globalData.value.imgOssUrl;
	// })

	onShow(() => {
		// 加载帮助列表
		getHelpList()
	})

	// 帮助说明列表
	const helpMingList = ref([{
		title: "帮助说明列表帮助说明列表帮助说明列表帮助说明列表帮助说明列表帮助说明列表"
	}, {
		title: "帮助说明列表帮助说明列表帮助说明列表"
	}, {
		title: "帮助说明列表帮助说明列表帮助说明列表"
	}])

	// 收益分类
	const list1 = reactive([{
			name: '大节点',
			value: 0
		},
		{
			name: '盒子',
			value: 1
		},
		{
			name: '路由器',
			value: 2
		}
	]);

	// 跳转帮助详情
	const selectItem = () => {
		uni.navigateTo({
			url: "/pages/index/indexChild/helpDetail"
		})
	}

	// 帮助类型发生改变
	const selectHelp = (val) => {
		console.log("val", val);
	}

	// 获取帮助列表
	const getHelpList = () => {
		console.log("获取帮助列表");
		// 帮助列表的参数
		// let e = {

		// }
		// this.$api.get().then(() => {
		// 	helpMingList.value = res.data;
		// })
	}
</script>

<style scoped>
	.u-tabs {
		width: 100%;
	}

	.classify {
		border-bottom: 2rpx solid #1F1757 !important;
		position: relative;
		top: -8rpx;
		/* left: 0;
		right: 0; */
	}

	.page /deep/ .u-tabs__wrapper__nav__line {
		z-index: 99;
	}

	.helpItem {
		height: 76rpx;
		border-bottom: 2rpx solid #130D82;
	}

	.helpTitle {
		width: 90%;
	}
</style>